<template>
    <div class="head">
        <div class="photograph friend-img flex" :class="{'hidden':showObject==='self'}" :style="styleObject" v-if="showObject==='friend'">
            <div class="img" v-if="friend.headImg!==''&&friend.status" :style="{...styleObject,'background-image':`url(${friend.headImg})`}"></div>
            <div class="img-none flex" v-else :style="styleObject">
                <div class="iconfont icon-xiangji2"></div>
                <div>暂无头像</div>
            </div>
        </div>
        <div class="photograph self-img flex" :class="{'hidden':showObject==='friend'}" :style="styleObject" v-if="showObject==='self'">
            <div class="img" v-if="self.headImg!==''" :style="{...styleObject,'background-image':`url(${self.headImg}?imageView2/0/h/150/interlace/1)`}"></div>
            <div class="img-none flex" v-else :style="styleObject">
                <svg class="svg-icon" aria-hidden="true">
                    <use xlink:href="#icon-my_1"></use>
                </svg>
<!--                <div class="noneImg-tip" :style="{width:'calc('+styleObject.width+' - 1vw)',left:'calc(1vw / 2)'}">{{noneImgTip?noneImgTip:'暂无头像'}}</div>-->
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue} from "vue-property-decorator";

    @Component({components: {}})
    export default class HeadImg extends Vue {
        private publicPath = process.env.BASE_URL;
        //头像属性
        @Prop({default: {}, type: Object})
        public styleObject!: Object;
        //显示对象
        @Prop({default: "", type: String})
        public showObject!: String;
        //没有头像提示
        @Prop({default: "", type: String})
        public noneImgTip!: String;
        //好友信息
        @Prop({
            default: () => {
            }, type: Object
        })
        public friend!: Object;
        //用户自己信息
        @Prop({
            default: () => {
            }, type: Object
        })
        public self!: Object;

        private mounted(): void {

        }


    }
</script>

<style scoped lang="stylus">
    //$photograph-width :=80px;
    // $photograph-height :=80px;
    //.border-add
       // border 1px dashed $theme-line-color;

    .photograph
        //width $photograph-width;
        //height $photograph-height;
        border-radius 50%;
        background-color #fff;
        color $theme-viceColor-font;
        text-align center;
        flex-wrap wrap;
        align-content center;

        .img-none
            border-radius 50%;
            //border 1px dashed $theme-line-color;
            flex-wrap wrap;
            justify-content center;
            align-content center;

        .icon-xiangji2
            font-size 30px;
            color #B9B8CD;
            margin-bottom 3px;

        .img
            border-radius 50%;
            background-position center;
            background-size cover;


    .self-img
        .img-none
            position relative;
            background-color #CDE0E4;
            border-radius 50%;
            justify-content center;
            align-items center;
            overflow hidden;

            .svg-icon
                font-size 15vw;
                margin-top 12px;

            .noneImg-tip
                position absolute;
                bottom 10px;
                left 5px;
                //width 20vw;
                height 16px;
                line-height 16px;
                text-align center;
                font-size 3.2vw;
                -webkit-text-size-adjust: none
                color #fff;
                background-color rgba(84, 97, 115, .4);

</style>
